<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>软帝集团项目验收</title>
	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css" rel="stylesheet">
	<style>
		.navbar{
			border-radius: 0;
		}
		body{
			background: #303952;
		}
		.alert:hover{
			color:#eee;
			background-color: #e15f41;
			cursor:pointer;
		}
		#startBtn{
			margin-bottom: 30px;
		}
		#endBtn{
			margin-bottom: 60px;
		}
		.copy{
			height: 50px;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<!-- 头部导航 -->
	<div class="navbar navbar-default">
		<div class="navbar-header">
			<a class="navbar-brand" href="" style="padding:5px">
				<img src="img/logo.jpg" alt="" height="40px" style="display: inline-block;"><span>软帝集团1909班项目验收抽签</span>
			</a>
		</div>
	</div>
	<!-- 内容 -->
	<div class="main">
		<div class="container">
			<!-- <div class="col-md-6">
				<div class="alert alert-danger animated zoomIn" data-group="1">第1组:</div>
			</div> -->
		</div>
		<div class="control text-center col-md-4 col-md-offset-4">
			<button class="btn btn-success btn-lg btn-block" id="startBtn"><i class="fa fa-caret-right"></i>&nbsp;开始抽签(3)</button>
		</div>
		<div class="control text-center col-md-4 col-md-offset-4">
			<button class="btn btn-primary btn-lg btn-block" id="endBtn" style="display:none;">第组演示&nbsp;<i class="fa  fa-flag-checkered"></i></button>
		</div>
	</div>
	<!-- 版权 -->
	<div class="navbar navbar-default navbar-fixed-bottom">
		<div class="text-center text-muted copy">by MRChai &copy; 软帝集团 </div>
	</div>
	
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="js/data.js"></script>
	<script>
		
		$(function(){
			var index = 0;
			//已抽取次数
			var count = 0;
			//抽取次数上限
			var limit = 3;
			
			//获取本地存储数据
			var data = localStorage.getItem('data');
			if(data){
				//解析数据
				teams = JSON.parse(data);
				//若存在数据,则说明抽签完成
				count = 3;
				//按钮失效
				$('#startBtn').attr('disabled','true').addClass('disabled btn-danger').text('抽签已结束');
				//显示小组演示按钮
				$('#endBtn').fadeIn();
				//确定演示到哪一小组了
				$.each(teams,function(i,n){
					if(n.finished){
						index = i;
					}	
				})
				$('#endBtn').html(`第${teams[index].tid}组演示&nbsp;<i class="fa  fa-flag-checkered"></i>`)
			}
			
			//显示默认分组信息
			arrangeShow();
			
			//开始抽签
			$('#startBtn').on('click',function(){
				count++;
				//随机排序
				teams = shuffle(teams);
				arrangeShow();
				//达到上限次数次时，存储抽签结果到本地
				if(count >= limit){					
					//存储到本地
					localStorage.setItem('data',JSON.stringify(teams));
					//按钮失效
					$('#startBtn').attr('disabled','true').addClass('disabled btn-danger').text('抽签已结束');
					//显示小组演示按钮
					$('#endBtn').html(`第${teams[index].tid}组演示&nbsp;<i class="fa  fa-flag-checkered"></i>`).fadeIn();
					return;
				}

				$('#startBtn').html(`<span class="fa fa-caret-right"></span>&nbsp;开始抽签(${limit-count})`)
			})
			
			//演示结束
			$('#endBtn').on('click',function(){
				$(`.alert:eq(${index})`).addClass('alert-danger');
				//获取当前组对象
				var team = teams[index++];
				//当前组演示完毕
				team.finished=true;
				//存储到本地
				localStorage.setItem('data',JSON.stringify(teams));
				if(index>=teams.length){
					$(this).attr('disabled','true').addClass('disabled btn-danger').html('验收完成&nbsp;<i class="fa  fa-flag-checkered"></i>');
					return;
				}
				$(this).html(`第${teams[index].tid}组演示&nbsp;<i class="fa  fa-flag-checkered"></i>`)
			})
		})
		
		//顺序展示
		function arrangeShow(){
			$('.container').empty();
			$(teams).each(function(i,n){
				var emps = n.emps;
				var finishedStyle = n.finished ? 'alert-danger':'alert-info';
				let html = `<div class="col-md-6">
								<div class="alert ${finishedStyle} text-center animated bounceIn" data-group="${n.tid}" ><i class="fa fa-users"></i>&nbsp;第${n.tid}组:${emps}</div>
							</div>`;
				$('.container').append($(html));
			})
			$('.container .alert').css({
				'font-size':'1.2em'
			})
		}
		
		//随机重排分组
		function shuffle(arr){
			var cloneArr = arr.concat();
			var len = cloneArr.length;
			for(var i=0;i<len;i++){
				var index = Math.floor(Math.random() * len);
				var temp = cloneArr[index];
				cloneArr[index] = cloneArr[i];
				cloneArr[i] = temp;
			}
			return cloneArr;
		}
	</script>
</body>
</html>